<template>
  <div class="scroll_main" :style="`height: ${$parent.mainHeight}px`"  ref="scrollWrapper">
    <!-- eslint-disable max-len -->
    <div class="iscroll" :style="{width: scrollDirection.toLocaleUpperCase() === 'Y' ? '100%' : 'auto'}">
      <div :class="['pull-more', isPullMore ? 'show' : 'hide']" ref="scrollMoreRef" v-if="scrollMore">
        <span>{{pullMoreText}}</span>
      </div>
      <!-- 解决匿名插槽不能使用filter问题 -->
      <slot name="body" :data="data" />
      <slot></slot>
      <div :class="['scroll-more', isShowMore ? 'show' : 'hide']" ref="scrollMoreRef" v-if="scrollMore">
        <span>{{moreText}}</span>
      </div>
    </div>
  </div>
</template>

<script>
// import IScroll from "iscroll";
import IScroll from "../../../node_modules/iscroll/build/iscroll-probe";

export default {
  name: "Scroll",
  props: {
    // 是否禁止滚动 暂时不支持
    "scroll-disable": {
      type: Boolean,
      default: false
    },
    // 滚动底部距离触发事件
    "scroll-distance": {
      type: [Number, String],
      default: 30
    },
    "scroll-direction": {
      type: String,
      default: "Y"
    },
    // 选填，是否显示滚动条
    "scroll-bars": {
      type: Boolean,
      default: true
    },
    // 选填，是否开启弹动动画
    "scroll-momentum": {
      type: Boolean,
      default: true
    },
    // 选填，是否有加载更多文本
    "scroll-more": {
      type: Boolean,
      default: false
    },
    data: [String, Object, Function, Array, Number]
  },
  data() {
    return {
      iScroll: null,
      // 是否加载更多
      isShowMore: false,
      isPullMore: false,
      // 加载更多文字
      moreText: "加载更多",
      pullMoreText: "下拉刷新",
      // 没有更多状态
      isNoShowMore: false,
      // 当前Y轴位置
      currentY: 0,
      currentX: 0,
      // 是否下一页
      isNext: false,
      // 是否已执行刷新
      isReload: false
    };
  },
  mounted() {
    /* eslint-disable no-new */
    /* eslint-disable dot-notation */
    document.addEventListener(
      "touchmove",
      e => {
        e.preventDefault();
      },
      { passive: false }
    );
    this.iScroll = new IScroll(this.$refs.scrollWrapper, {
      probeType: 3,
      /* eslint-disable no-unneeded-ternary */
      disableMouse: process.env.NODE_ENV === "production" ? true : false,
      // 水平滚动
      scrollX: this.scrollDirection.toLocaleUpperCase() === "Y" ? false : true,
      // 垂直滚动
      scrollY: this.scrollDirection.toLocaleUpperCase() === "Y" ? true : false,
      // 您可以打开/关闭用户在屏幕上快速弹动时执行的动量动画。关闭此功能可大大提高性能
      momentum: this.scrollMomentum,
      // 是否显示默认滚动条
      scrollbars: this.scrollBars,
      // 不使用滚动时滚动条隐藏
      fadeScrollbars: true,
      // clip: 只是将指示器移动到其容器外部，印象是滚动条收缩，但它只是移出屏幕。如果您可以接受视觉效果，则此选项将极大地提高整体性能。
      // scale: 关闭，useTransition因此所有的动画都伴随着requestAnimationFrame。指标实际上大小不一，最终结果更好。
      shrinkScrollbars: "clip",
      preventDefault: false
      // ,
      // onRefresh: e => {
      //   console.log(e);
      // },
      // onScrollMove: e => {
      //   console.log(e);
      // },
      // onScrollEnd: e => {
      //   console.log(e);
      // }
    });
    /* eslint-disable */
    if (this.scrollDirection.toLocaleUpperCase() === "Y") {
      // let minY;
      const self = this;
      // this.iScroll.on("scrollStart", function() {
      //   console.log(this.y, "start");
      // });
      this.iScroll.on("scroll", function() {
        // minY = minY < this.y ? minY : this.y;
        if (this.y >= self.scrollDistance && this.directionY === -1) {
          self.pullMoreText = "松开刷新";
          self.isPullMore = true;
          self.isReload = true;
        } else if (
          this.y < self.scrollDistance &&
          this.y > 0 &&
          this.directionY === -1 &&
          !self.isReload
        ) {
          self.pullMoreText = "下拉刷新";
          self.isPullMore = true;
        } else {
          self.isPullMore = false;
        }
        // 是否还有下一页
        if (!self.isNoShowMore) {
          // 如果最大Y值减去当前Y值大于一并且方向是上拉，并且最大减去当前Y轴的位置小于触发点位置才会显示加载更多文字
          if (
            this.maxScrollY - this.y > 1 &&
            this.directionY === 1 &&
            this.maxScrollY - this.y < self.scrollDistance &&
            !self.isNext
          ) {
            self.isShowMore = true;
            self.scrollMore && (self.moreText = "加载更多");
            self.isNext = false;
          } else if (this.maxScrollY - this.y > self.scrollDistance) {
            self.scrollMore && (self.moreText = "松开加载");
            self.isNext = true;
          }
        } else {
          if (
            this.maxScrollY - this.y > 1 &&
            this.directionY === 1 &&
            this.maxScrollY - this.y < self.scrollDistance
          ) {
            self.isShowMore = true;
          }
        }
        self.currentY = this.y;
        self.currentX = this.x;
      });
      this.iScroll.on("scrollCancel", function() {
        self.currentY = this.y;
        self.currentX = this.x;
        // 执行滑动结束事件
        self.$emit("bindScrollEnd", this);
      });
      this.iScroll.on("scrollEnd", function() {
        // minY = minY < this.y ? minY : this.y;
        if (self.isNext || self.isReload) {
          (!self.isNoShowMore || self.isReload) &&
            self.$emit("infiniteScroll", self.isReload);
        }
        self.isReload && (self.isNoShowMore = false);
        // 隐藏加载更多文字
        self.isShowMore = false;
        self.currentY = this.y;
        self.currentX = this.x;
        // 是否加载下一页
        self.isNext = false;
        // 隐藏上拉刷新文字
        self.isPullMore = false;
        // 是否下拉刷新
        self.isReload = false;
        // 执行滑动结束事件
        self.$emit("bindScrollEnd", this);
      });
    }
  },
  methods: {
    /**
     * 刷新滚动距离
     */
    refresh() {
      this.iScroll.refresh();
      this.isShowMore = false;
    },
    /**
     * 设置滚动条位置
     * @param [Number] x 滚动条X轴
     * @param [Number] y 滚动条Y轴
     */
    scrollTo(x, y) {
      this.iScroll.scrollTo(x, y);
    },
    /**
     * 获取当前Y轴位置
     */
    getScrollTop() {
      return this.currentY;
    },
    /**
     * 修改下拉文本
     * 一般适用于无更多的时候触发
     * @param [String] text 加载更多底部文本
     */
    setEndMoreText(text) {
      if (typeof text === "string") {
        this.moreText = text;
        this.isNoShowMore = true;
      }
    },
    stop() {
      this.iScroll.scrollTo(this.currentX, this.currentY, 0);
      // 执行滑动结束事件
      this.$emit("bindScrollEnd", this.iScroll);
    }
  }
};
</script>


<style>
.scroll_main {
  position: relative;
  overflow: hidden;
}
.wrapper {
  width: auto;
  overflow: hidden;
}
.iscroll {
  position: absolute;
  width: 100%;
}
/* .iscroll > * {
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  -moz-transform: translate3d(0, 0, 0);
  -moz-backface-visibility: hidden;
  -o-transform: translate3d(0, 0, 0);
  -o-backface-visibility: hidden;
} */
.Router {
  width: 100%;
}
/* 加载更多 */
.scroll-more {
  width: 100%;
  text-align: center;
  margin: 0.4rem 0;
  color: #666;
  font-size: 0.35rem;
}
.pull-more {
  width: 100%;
  text-align: center;
  color: #666;
  font-size: 0.35rem;
}
.show {
  display: block;
}
.hide {
  display: none;
}
/* left 进场动画 */
.slide-left-enter,
.slide-right-leave-active {
  height: 0;
  opacity: 0;
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
}
.slide-right-enter,
.slide-left-leave-active {
  height: 0;
  opacity: 0;
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100% 0);
}
</style>

